<template>

  <el-row :gutter="20">
    <el-col :span="12" :offset="0"    >

      <el-upload
          class="upload-demo"
          action="http://localhost/api/u6"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="5"
          :on-exceed="handleExceed"
          :file-list="fileList"
      >
        <el-button type="primary">Click to upload</el-button>
        <template #tip>
          <div class="el-upload__tip">
            jpg/png files with a size less than 500KB.
          </div>
        </template>
      </el-upload>
    </el-col>
  </el-row>

</template>
<script setup>
import {ElMessage, ElMessageBox} from 'element-plus'
import {ref} from 'vue'

const fileList = ref([
  {
    name: 'food.jpeg',
    url: '1.jpg',
  },
  {
    name: 'food2.jpeg',
    url: '2.jpg',
  },
])

const handleRemove = (file, uploadFiles) => {
  console.log(file, uploadFiles)
}

const handlePreview = (uploadFile) => {
  console.log(uploadFile)
}

const handleExceed = (files, uploadFiles) => {
  ElMessage.warning(
      `The limit is 3, you selected ${files.length} files this time, add up to ${
          files.length + uploadFiles.length
      } totally`
  )
}

const beforeRemove = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(
      `Cancel the transfert of ${uploadFile.name} ?`
  ).then(
      () => true,
      () => false
  )
}
</script>
